Here we're going to create an infinite list where we load more data as we scroll.

We can experiment and play with a component to get something we like or we can think in terms of how we want to use it and how you want to allow users to use it and provide that behavior.

He're we're going for the second approach.

We can think of how our List component should look in order to provide the infinite scroll functionality.

The list is infinite so if you want to read the code click the checkbox in the top right .

<script>
	import List from "./List.svelte";
	import data from "./data";

	let showList = true;
</script>

<label class="fixed right-4 top-4 rounded-lg bg-blue-300 p-4 text-xl" for="">
	Show list
	<input type="checkbox" bind:checked={showList} />
</label>

{#if showList}
	<List {...$data} key="id" let:item={{ download_url, author }} on:loadMore={data.fetchMore}>
		<img slot="item" class="w-full" src={download_url} alt="stunning photo taken by {author}" />
	</List>
{/if}

<style>
</style>

We're reusing the viewport action from use:viewport . We're using a writable store and a custom store as the default export with our custom functionality. We're using an event dispatcher that dispatches a custom event loadMore whenever the action triggers the enterViewport event. We're using a slot to put the img tag inside of the component in the markup . We're using spread props in order to spread all of the $data store into our list component.

That's it! I hoped you closed the infinite list so you can read this 😊